<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view class="grace-body" slot="gBody">
			<scroll-view scroll-y="true" :style="{height:mainHeight+'px'}" @scrolltolower="scrollend" @scroll="scroll"
			 @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
				<graceReload ref="graceReload" width="700rpx" marginLeft="25rpx" @reload="reload"></graceReload>
				<graceEmpty v-if="list == 'empty'">
					<view slot="img" class="empty-view">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="empty-img" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
					</view>
					<text slot="text" class="grace-text-small grace-gray">本栏目暂无数据</text>
				</graceEmpty>
				<block v-for="(goods, index) in list" :key="index">
					<view class="ur-date-name">
						<text class="grace-h4 grace-bold">{{goods.createdate}}</text>
					</view>
					<block v-for="(item, goodsindex) in goods.items" :key="goodsindex">
						<view class="grace-news-list grace-border-b">
							<view class="grace-news-item">
								<view class="grace-news-img grace-news-img-l">
									<image :src="item.goods_img" mode="widthFix" class="grace-news-img-in"></image>
								</view>
								<view class="grace-news-body">
									<text class="grace-news-title">{{item.goods_name}}</text>
									<text class="grace-img-card-price">￥{{item.goods_price}}</text>
									<text class="grace-line-through grace-text-small grace-gray">￥{{item.goods_price}}</text>
								</view>
							</view>
						</view>
					</block>
				</block>
				<graceLoading :loadingType="loadingTypes"></graceLoading>
			</scroll-view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceFlex from "../../graceUI/components/graceFlex.vue";
	import graceLoading from "../../graceUI/components/graceLoading.vue";
	import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
	import graceReload from '../../graceUI/components/graceReload.vue';
	var page = 1;
	export default {
		data() {
			return {
				mainHeight: 600,
				// 每个选项卡对应的分页
				// 加载状态
				// 每个滚动区域的滚动值
				scrollTops: 1,
				loadingTypes: 3,
				list: [],
			}
		},
		onLoad: function() {
			this.paginate();
		},
		methods: {
			//查询反馈意见
			async paginate(isReload) {
				let list = [{
					createdate: '2020-02-22',
					items: [{
							goods_img: 'http://i1.mifile.cn/f/i/2019/C76029A6/part6-2.jpg',
							goods_name: '小米 MIX3 一面科技 一面艺术 ( 磁动力滑盖全面屏 | 故宫特别版 )',
							goods_price: 39.35
						},
						{
							goods_img: 'http://i1.mifile.cn/f/i/2019/C76029A6/part6-2.jpg',
							goods_name: '小米 MIX3 一面科技 一面艺术 ( 磁动力滑盖全面屏 | 故宫特别版 )',
							goods_price: 39.35
						},
						{
							goods_img: 'http://i1.mifile.cn/f/i/2019/C76029A6/part6-2.jpg',
							goods_name: '小米 MIX3 一面科技 一面艺术 ( 磁动力滑盖全面屏 | 故宫特别版 )',
							goods_price: 39.35
						}
					],
				}];
				
				this.list = list;
				console.log(this.list);
				// let data = await this.$apis.paginateNewsItem({
				// 	page: page
				// });
				// let list = data.data;
				// let list = [];
				// if (items.length > 0) {
				// 	// 第一页
				// 	if (page == 1) {
				// 		this.list = list;
				// 	}
				// 	// 之后的加载页
				// 	else {
				// 		this.list = this.list.concat(list);
				// 	}
				// 	// 页码增加
				// 	page++;
				// 	setTimeout(() => {
				// 		this.loadingTypes = 3;
				// 	}, 300)
				// } else if (this.items.length == 0) {
				// 	console.log('empty');
				// 	this.list = 'empty';
				// 	this.loadingTypes = 4;
				// } else {
				// 	console.log('nomore');
				// 	this.loadingTypes = 2;
				// }
				if (isReload) {
					setTimeout(() => {
						this.$refs.graceReload.endReload();
					}, 300)
				}
			},
			// 加载更多
			scrollend: function(e) {
				// 判断加载状态避免多次滚动时有加载尚未完成
				if (this.loadingTypes == 2 || this.loadingTypes == 4) {
					return false;
				}
				console.log('loadmore.....');
				this.getNews();
			},
			scroll: function(e) {
				this.scrollTops = e.detail.scrollTop;
			},
			touchstart: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops,
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload.touchstart(touchObj);
			},
			touchmove: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops,
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload.touchmove(touchObj);

			},
			touchend: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops,
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload.touchend(touchObj);
			},
			// 下拉刷新
			reload: function() {
				page = 1;
				this.loadingTypes = 3;
				this.paginate(1);
			},
			//打开报名详情
			goDetail: function(id) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.signup,
					query: {
						id: id
					}
				})
			}
		},
		components: {
			gracePage,
			graceFlex,
			graceEmpty,
			graceLoading,
			graceReload,
		}
	}
</script>
<style>
	.grace-news-btn {
		display: block;
		line-height: 32rpx;
		font-size: 26rpx;
		width: 160rpx;
		padding-left: -30rpx;
	}

	.grace-news-img {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		font-size: 0;
	}

	.grace-news-img-in {
		width: 100%;
	}

	.grace-news-imgs-img {
		width: 225rpx;
		height: 380rpx;
	}

	.ur-date-name {
		padding: 20rpx 0;
		width: 500rpx;
	}
</style>
